<template>
  <div id="identiy">
    <!-- 认证页 -->
    <div class="identiy-inner" v-if="type != 2 && page == 1">
      <!-- 注册 ： 上传三合一图 -->
      <div class="certificate-upload" v-if="type==1">
        <h4>三合一营业执照副本</h4>
        <div class="control-block">
          <img
            v-if="imageList['reader1'] != '' "
            :src="imageList['reader1']"
            alt="i业主"
            preview="1"
            preview-text
          />
          <div class="image-reader-add">
            <md-image-reader
              name="reader1"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传营业执照</p>
          </div>
        </div>
      </div>
      <!-- 注册 ： 法人授权书 -->
      <div class="certificate-upload" v-if="type==1">
        <h4>法人授权书</h4>
        <div class="control-block">
          <img
            v-if="imageList['reader2'] != '' "
            :src="imageList['reader2']"
            alt="i业主"
            preview="2"
            preview-text
          />
          <div class="image-reader-add">
            <md-image-reader
              name="reader2"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传法人授权书</p>
          </div>
        </div>
      </div>
      <!-- 注册 ：上传身份证 -->
      <div class="certificate-upload">
        <h4 v-if="type==0">身份证</h4>
        <h4 v-if="type==1">被授权人身份证</h4>
        <div class="control-block">
          <div class="image-card-add">
            <div class="pre-view" v-if="imageList['reader3'] != ''">
              <img :src="imageList['reader3']" alt />
            </div>
            <md-image-reader
              name="reader3"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传身份证信息面</p>
          </div>
          <div class="image-card-add">
            <div class="pre-view" v-if="imageList['reader4'] != ''">
              <img :src="imageList['reader4']" alt />
            </div>
            <md-image-reader
              name="reader4"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传身份证国徽面</p>
          </div>
        </div>
      </div>
      <!-- 注册 ：身份信息 -->
      <div class="identity-input">
        <md-field>
          <md-input-item v-model="idinfo.name" title="姓名" placeholder="请输入真实姓名" align="right"></md-input-item>
          <md-input-item v-model="idinfo.sex" title="性别" placeholder="请输入性别：男" align="right"></md-input-item>
          <md-input-item v-model="idinfo.minority" title="民族" placeholder="请输入民族：汉" align="right"></md-input-item>
          <md-input-item
            v-model="idinfo.birth_date"
            title="出生日期"
            placeholder="20190101"
            align="right"
          ></md-input-item>
          <md-input-item
            v-model="idinfo.address"
            title="身份证地址"
            placeholder="请输入身份证地址"
            align="right"
          ></md-input-item>
          <md-input-item
            v-model="idinfo.idcard_num"
            title="身份证号"
            placeholder="请输入身份证号"
            maxlength="18"
            align="right"
          ></md-input-item>
          <md-input-item
            v-model="idinfo.organization"
            title="签发机关"
            placeholder="请输入身份证签发机关"
            align="right"
          ></md-input-item>
          <md-input-item
            v-model="idinfo.idcard_begin_date"
            title="签发日期"
            type="text"
            placeholder="签发日期：19990101"
            align="right"
          ></md-input-item>
          <md-input-item
            v-model="idinfo.idcard_end_date"
            title="失效日期"
            type="text"
            placeholder="失效日期：20200101"
            align="right"
          ></md-input-item>
        </md-field>
      </div>
      <!-- 按钮区 -->
      <div class="btn-block">
        <!-- 注册 -->
        <md-button round type="primary" @click="next">下一步</md-button>
      </div>
    </div>
    <div class="identiy-inner" v-if="type == 2 && page == 1">
      <!-- 外国 港澳台 ： 通行证 -->
      <div class="certificate-upload">
        <h4>上传通行证正面</h4>
        <div class="control-block">
          <img
            v-if="imageList['reader5'] != '' "
            :src="imageList['reader5']"
            preview="5"
            preview-text
          />
          <div class="image-reader-add">
            <md-image-reader
              name="reader5"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传通行证正面</p>
          </div>
        </div>
        <h4>上传通行证反面</h4>
        <div class="control-block">
          <img
            v-if="imageList['reader6'] != '' "
            :src="imageList['reader6']"
            preview="6"
            preview-text
          />
          <div class="image-reader-add">
            <md-image-reader
              name="reader6"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#ddd"></md-icon>
            <p>上传通行证反面</p>
          </div>
        </div>
      </div>
      <!-- 按钮区 -->
      <div class="save-block">
        <!-- 注册 -->
        <md-button round type="primary" @click="saveUserCertificates">保存</md-button>
      </div>
    </div>
    <!-- 实名页 -->
    <div class="personal-bank" v-if="page == 2">
      <h2>实名验证，请绑定一张您名下的银行卡</h2>
      <div class="add-bank">
        <p>添加储蓄卡/信用卡</p>
        <md-field>
          <md-input-item title="银行卡号" v-model.trim="bankItem.card_num" placeholder="持卡人需与身份证姓名一致">
            <div class="bank-number-btn" slot="right">
              <md-image-reader
                name="reader1"
                @select="onBankSelect"
                @complete="onBankComplete"
                @error="onBankError"
              ></md-image-reader>
              <md-icon name="camera" size="lg"></md-icon>
            </div>
          </md-input-item>
          <md-input-item title="手机号" v-model.trim="bankItem.mobile" placeholder="银行预留手机号"></md-input-item>
          <div class="link-btn">
            <md-button
              v-if="bandinfo.length == 0"
              @click="addBankItem"
              type="primary"
              size="small"
              plain
              round
            >添加验证</md-button>
            <md-button v-else @click="addBankItem" type="primary" size="small" plain round>继续添加</md-button>
          </div>
        </md-field>
      </div>
      <ul v-if="bandinfo.length != 0">
        <li v-for="(item,index) in bandinfo" :key="index">
          <span>{{item.bank_name}}</span>
          <span>{{item.genre == "1" ? "储蓄卡": "借记卡"}}</span>
          <span>**** {{item.card_num.substr(-4)}}</span>
          <div class="del-btn" @click="delBank(index)">
            <md-icon name="delete" size="md"></md-icon>
          </div>
        </li>
      </ul>
      <div class="register-btn">
        <md-button @click="registerSubmit" type="primary" round>注册完成</md-button>
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩
import {
  NoticeBar,
  Dialog,
  Icon,
  ImageReader,
  Tag,
  Toast,
  Button,
  InputItem,
  Field,
  FieldItem,
  DetailItem
} from "mand-mobile";

export default {
  components: {
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Dialog.name]: Dialog,
    [DetailItem.name]: DetailItem
  },
  name: "identiy",
  data() {
    return {
      page: 1, //1为认证也，2为实名页
      type: 0, //0为公民业主，1为法人公司，2为外国人，港澳
      imageList: {
        reader1: "",
        reader2: "/static/images/register/shouquan.png",
        reader3: "",
        reader4: "",
        reader5: "",
        reader6: ""
      },
      idinfo: {
        business_license_file: "", //营业执照url  若前端页面无此行，默认传空字符串
        attorney_of_legal_person_file: "", //法人授权url

        idcard_positive_file: "", //身份证正面url
        idcard_back_file: "", //身份证反面url

        name: "", //姓名
        sex: "", //性别直接传男 或者 女
        minority: "", //民族
        birth_date: "", //出生
        address: "", //住址
        idcard_num: "", //身份证号

        organization: "", //签发机关
        idcard_begin_date: "", //身份证有效开始期限
        idcard_end_date: "" //身份证失效日期
      },
      positive: "", //外国人上传证件正面
      back: "", //外国人上传证件反面
      //------------------------第二个页面
      bankName: "", //银行人
      bankItem: {
        mobile: "", //绑定银行的手机
        bank_name: "", //银行名称
        card_num: "", //卡号
        genre: "1", //借记卡 银行卡类型 input type="hidden"
        open_bank_name: '',//无用
        name: '', //无用
        verify_money: 0,//无用

        cardType: "",//银行卡类型
        sex: "",    //性别
        area: "", //住址
        province: "", //省份
        city: "", //城市
        prefecture: "", //区
        birthday: "", //生日
        addrCode: "", //地区码
      },
      bandinfo: [], //银行卡列表
      mobile: ""
    };
  },
  methods: {
    //  上传图片
    onReaderSelect() {
      Toast.loading("上传中...");
    },
    // 设置图片
    onReaderComplete(name, { dataUrl }) {
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        this.imageList[name] = dataUrl;
        if (name == "reader1") {
          let params = {
            image: dataUrl
          };
          https
            .fetchPost(config.putYingYe, params)
            .then(res => {
              Toast.hide();
              if (res.data.code == 1) {
                let _this = this;
                let callBack = function(res) {
                  if (res.data.code == 1) {
                    _this.idinfo.business_license_file = res.data.data.url;
                    Toast.hide();
                    Toast.succeed("添加成功", 2500);
                  } else {
                    Toast.hide();
                    Toast.failed("图片上传失败,请重试");
                  }
                };
                this.saveBase64Image(dataUrl, callBack);
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        } else if (name == "reader2") {
          let params = {
            image: dataUrl
          };
          https
            .fetchPost(config.putYingYe, params)
            .then(res => {
              Toast.hide();
              console.log(res.data.data);
              if (res.data.code == 1) {
                let _this = this;
                let callBack = function(res) {
                  if (res.data.code == 1) {
                    _this.idinfo.attorney_of_legal_person_file =
                      res.data.data.url;
                    Toast.hide();
                    Toast.succeed("添加成功", 2500);
                  } else {
                    Toast.hide();
                    Toast.failed("图片上传失败,请重试");
                  }
                };
                this.saveBase64Image(dataUrl, callBack);
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        } else if (name == "reader3") {
          // 身份证信息页
          let params = {
            image: dataUrl,
            side: "front" //信息页
          };
          https
            .fetchPost(config.putIdCard, params)
            .then(res => {
              Toast.hide();
              console.log(res.data);
              if (res.data.code == 1) {
                if (res.data.data.image_status == "normal") {
                  let data = res.data.data.words_result;
                  this.idinfo.name = data["姓名"].words;
                  this.idinfo.sex = data["性别"].words;
                  this.idinfo.minority = data["民族"].words;
                  this.idinfo.birth_date = data["出生"].words;
                  this.idinfo.address = data["住址"].words;
                  this.idinfo.idcard_num = data["公民身份号码"].words;
                  let _this = this;
                  let callBack = function(res) {
                    if (res.data.code == 1) {
                      _this.idinfo.idcard_positive_file = res.data.data.url;
                      Toast.hide();
                      Toast.succeed("添加成功", 2500);
                    } else {
                      Toast.hide();
                      Toast.failed("图片上传失败,请重试");
                    }
                  };
                  this.saveBase64Image(dataUrl, callBack);
                } else {
                  Toast.failed("图片识别失败,请手填或重新识别");
                }
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        } else if (name == "reader4") {
          // 身份证国徽
          let params = {
            image: dataUrl,
            side: "back" //国徽页
          };
          https
            .fetchPost(config.putIdCard, params)
            .then(res => {
              Toast.hide();
              console.log(res.data);
              if (res.data.code == 1) {
                if (res.data.data.image_status == "normal") {
                  let data = res.data.data.words_result;
                  this.idinfo.idcard_end_date = data["失效日期"].words;
                  this.idinfo.idcard_begin_date = data["签发日期"].words;
                  this.idinfo.organization = data["签发机关"].words;
                  let _this = this;
                  let callBack = function(res) {
                    if (res.data.code == 1) {
                      _this.idinfo.idcard_back_file = res.data.data.url;
                      Toast.hide();
                      Toast.succeed("添加成功", 2500);
                    } else {
                      Toast.hide();
                      Toast.failed("图片上传失败,请重试");
                    }
                  };
                  this.saveBase64Image(dataUrl, callBack);
                } else {
                  Toast.failed("图片识别失败,请手填或重新识别");
                }
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        } else if (name == "reader5") {
          let _this = this;
          let callBack = function(res) {
            if (res.data.code == 1) {
              _this.positive = res.data.data.url;
              Toast.hide();
              Toast.succeed("添加成功", 2500);
            } else {
              Toast.hide();
              Toast.failed("图片上传失败,请重试");
            }
          };
          this.saveBase64Image(dataUrl, callBack);
        } else if (name == "reader6") {
          let _this = this;
          let callBack = function(res) {
            if (res.data.code == 1) {
              _this.back = res.data.data.url;
              Toast.hide();
              Toast.succeed("添加成功", 2500);
            } else {
              Toast.hide();
              Toast.failed("图片上传失败,请重试");
            }
          };
          this.saveBase64Image(dataUrl, callBack);
        }
        this.$previewRefresh();
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    saveUserQuarters() {
      let uid = this.uid;
      let qid = this.qid;
      let type = this.type;
      let params = {
        uid,
        qid,
        type
      };
      https
        .fetchPost(config.saveUserQuarters, params)
        .then(res => {
          if (res.data.code == 1) {
            setTimeout(() => {
              this.$router.replace({
                path: "/index"
              });
            }, 5000);
          } else {
            Toast.failed(res.data.msg, 2000);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 港澳台 外国认证
    saveUserCertificates() {
      let uid = this.uid;
      let qid = this.qid;
      let positive = this.positive;
      let back = this.back;
      if (positive == "") {
        Toast.failed("请上传通行证正面", 2000);
        return;
      }
      if (back == "") {
        Toast.failed("请上传通行证反面", 2000);
        return;
      }
      let params = {
        uid,
        qid,
        positive,
        back
      };
      https
        .fetchPost(config.getUserCertificates, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.info("申请已提交，认证结果有微信通知", 1500);

            // Toast.succeed(res.data.msg, 1500);
            this.saveUserQuarters();
          } else {
            Toast.failed(res.data.msg, 2000);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 下一步
    next() {
      if (this.type == 1 && this.idinfo.business_license_file == "") {
        Toast.failed("请上传营业执照", 2000);
        return;
      }
      if (this.type == 1 && this.idinfo.attorney_of_legal_person_file == "") {
        Toast.failed("请上传法人授权书", 2000);
        return;
      }
      let name = this.idinfo.name;
      let sex = this.idinfo.sex;
      let minority = this.idinfo.minority;
      let birth_date = this.idinfo.birth_date;
      let address = this.idinfo.address;
      let idcard_num = this.idinfo.idcard_num;
      let organization = this.idinfo.organization;
      let idcard_begin_date = this.idinfo.idcard_begin_date;
      let idcard_end_date = this.idinfo.idcard_end_date;

      if (
        name == "" ||
        sex == "" ||
        minority == "" ||
        birth_date == "" ||
        address == "" ||
        idcard_num == "" ||
        organization == "" ||
        idcard_begin_date == "" ||
        idcard_end_date == ""
      ) {
        Toast.failed("请上完善身份信息", 2000);
        return;
      }
      this.page = 2;
    },
    // 64图转url
    saveBase64Image(dataUrl, callBack) {
      let params = {
        image: dataUrl
      };
      https
        .fetchPost(config.base64Image, params)
        .then(res => {
          callBack(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //////////////第二个页面----------------------
    //  上传图片
    onBankSelect() {
      Toast.loading("图片上传中...");
    },
    onBankComplete(name, { dataUrl }) {
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        let params = {
          image: dataUrl
        };
        https
          .fetchPost(config.putBandCard, params)
          .then(res => {
            Toast.hide();
            console.log(res.data);
            if (res.data.code == 1) {
              this.bankItem.card_num = res.data.data.result.bank_card_number;
              this.bankItem.genre = res.data.data.result.bank_card_type;
              this.bankItem.bank_name = res.data.data.result.bank_name;
              Toast.succeed("添加成功", 2500);
            } else {
              Toast.info(res.data.msg);
            }
          })
          .catch(err => {
            Toast.hide();
            console.log(err);
            Toast.info("异常", err.data.msg);
          });
      });
    },
    onBankError(name, { msg }) {
      Toast.failed(msg);
    },
    addBankItem() {
      let _this = this;
      let item = this.bankItem;
      if (item.card_num == "") {
        Toast.info("请先填写银行信息", 2500);
        return;
      }
      let mobile = this.bankItem.mobile;
      const verify = /^1[345789]\d{9}$/; //电话号正则
      mobile = mobile.replace(/\s+/g, "");
      if (!verify.test(mobile) && mobile.length != 11) {
        Toast.info("请输入正确手机号", 2000);
        return;
      }
      let accountNo = this.bankItem.card_num.replace(/\s*/g, "");
      this.bankItem.card_num = accountNo;
      let idCard = this.idinfo.idcard_num;
      let name = this.idinfo.name;
      Dialog.confirm({
        title: "提示",
        content: "确认银行信息？",
        confirmText: "确定",
        onConfirm: () => {
          Toast.loading("验证中...");
          let params = {
            accountNo,
            idCard,
            mobile,
            name
          };
          https
            .fetchPost(config.identify, params)
            .then(res => {
              if (res.data.code == 1 && res.data.data.status == "01") {
                Toast.succeed(res.data.data.msg);
                let data = res.data.data;
                _this.bankItem.bank_name = data.bank;
                _this.bankItem.cardType =  data.cardType;
                _this.bankItem.sex = data.sex;
                _this.bankItem.area = data.area;
                _this.bankItem.province = data.province;
                _this.bankItem.city = data.city;
                _this.bankItem.prefecture = data.prefecture;
                _this.bankItem.birthday = data.birthday;
                _this.bankItem.addrCode = data.addrCode;
                _this.bankItem.open_bank_name = data.bank;
                _this.bankItem.name = data.name;
                _this.bankItem.verify_money = 0;

                _this.bankName = res.data.data.name;
                _this.bandinfo.push(_this.bankItem);
                _this.mobile = mobile;
                _this.bankItem = {
                  bank_name: "", //银行名称
                  card_num: "", //卡号
                  mobile: "", //手机号
                  genre: "1", //借记卡 银行卡类型 input type="hidden"
                  open_bank_name: '',//无用
                  name: '', //无用
                  verify_money: 0,//无用

                  cardType: "",//银行卡类型
                  sex: "",    //性别
                  area: "", //住址
                  province: "", //省份
                  city: "", //城市
                  prefecture: "", //区
                  birthday: "", //生日
                  addrCode: "", //地区码
                };
              } else {
                Toast.failed("验证不通过");
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    },
    delBank(index) {
      Dialog.confirm({
        title: "提示",
        content: "确认删除该条银行卡？",
        confirmText: "确定",
        onConfirm: () => {
          this.bandinfo.splice(index, 1);
        }
      });
    },
    registerSubmit() {
      let mobile = this.mobile;
      let idinfo = this.idinfo;
      let bandinfo = this.bandinfo;
      let uid = this.uid;
      let params = {
        uid,
        mobile,
        idinfo,
        bandinfo,
        landinfo: []
      };
      if (bandinfo.length == 0) {
        Toast.failed("请先添加一张您的银行卡");
        return;
      }
      if (idinfo.name != this.bankName) {
        Toast.failed("您的银行卡姓名与权利人不符");
        return;
      }
      console.log(this.mobile);
      Dialog.confirm({
        title: "提示",
        content: "确认提交注册信息？",
        confirmText: "确定",
        onConfirm: () => {
          Toast.loading("注册中...");
          https
            .fetchPost(config.register, params)
            .then(res => {
              Toast.hide();
              // console.log(res.data);
              if (res.data.code == 1) {
                Toast.info("申请已提交，认证结果有微信通知", 5000);
                // Toast.succeed(res.data.msg, 1500);
                this.saveUserQuarters();
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info("异常", err.data.msg);
            });
        }
      });
    }
  },
  created() {
    this.type = this.$route.query.type;
    this.qid = this.$route.query.qid;
    this.uid = this.$route.query.uid;
  },
  mounted() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#identiy {
  .identiy-inner {
    height: 100vh;
  }
  // background: #fff;
  .tip {
    background: #fff;
    z-index: 0;
    padding: 20px 0 0;
    p {
      font-size: 24px;
    }
  }
  .certificate-upload {
    background: #fff;
    h4 {
      padding-left: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .control-block {
      display: flex;
      justify-content: center;
      .image-reader-add,
      .image-card-add {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 4px 1px #eee;
        border-radius: 14px;
        height: 320px;
        width: 280px;
        margin: 10px 15px;
        background: #fff;
        .pre-view {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 9;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .md-image-reader {
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
        }
        p {
          margin-top: 20px;
          font-size: 24px;
          color: #666;
        }
      }
      img {
        height: 320px;
        width: 280px;
      }
      .image-card-add {
        width: 300px;
        height: 180px;
        img {
          width: 300px;
          height: 180px;
        }
      }
    }
  }
  .btn-block {
    background: #fff;
    padding-top: 20px;
    padding-bottom: 200px;
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
  .save-block {
    background: #fff;
    padding-top: 120px;
    padding-bottom: 200px;
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
  .personal-bank {
    padding: 30px 30px 0;
    h2 {
      font-size: 28px;
      color: #333;
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .add-bank {
      box-shadow: 0 0 6px 1px #e1e1e1;
      border-radius: 20px;
      padding: 20px 0 8px;
      margin-top: 28px;
      p {
        font-size: 26px;
        color: #999;
        text-align: center;
      }
      .link-btn {
        margin-top: 40px;
        padding: 0 80px;
      }
      .bank-number-btn {
        position: relative;
      }
    }
    h3 {
      font-size: 28px;
      color: #666;
      margin: 40px 0;
      strong {
        font-size: 30px;
        font-weight: 600;
        color: $themeGold;
      }
    }
    ul {
      padding-top: 40px;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 6px 1px #e1e1e1;
        border-radius: 20px;
        padding: 20px 25px;
        margin-bottom: 30px;
        font-size: 26px;
        color: #666;
        .del-btn {
          display: flex;
          width: 60px;
          height: 100%;
          justify-content: center;
          color: $themeGold;
        }
      }
    }
  }
  .register-btn {
    margin-top: 300px;
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
}
</style>
